Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Merged
merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

merged 9 commits into from
Jan 21, 2025
+198 −26

Conversation

c298lee
Copy link
Member

@c298lee c298lee commented Jan 17, 2025 •
edited
Loading

  • Updates some cropping variable names to make it more clear that it's only meant for cropping
  • The pen tool button is improved in feat(user feedback): Create pen tool button for uf annotations #15102, which needs to be merged first
  • The drawing tool button needs to be "on" to annotate, but cropping can happen at any time
  • Once the button is "on", drawing happens on mouse down and mouse move, and on mouse up, the drawing gets "squashed" onto the image. The "squashing" can be moved to happen at a different time in a future PR if we want to incorporate undo, selection, or erasing
  • The experimental flag must be on to use annotations: _experiments: {annotations: true}
Screen.Recording.2025-01-17.at.5.38.33.PM.mov

Closes #15064

@c298lee c298lee requested review from ryan953 and billyvg January 17, 2025 22:44
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 17, 2025 •
edited
Loading

size-limit report 📦

Path Size % Change Change
@sentry/browser 22.99 KB - -
@sentry/browser - with treeshaking flags 22.88 KB - -
@sentry/browser (incl. Tracing) 35.71 KB - -
@sentry/browser (incl. Tracing, Replay) 72.51 KB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 66.06 KB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 76.77 KB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 89.24 KB +0.55% +493 B 🔺
@sentry/browser (incl. Feedback) 39.68 KB +1.23% +493 B 🔺
@sentry/browser (incl. sendFeedback) 27.63 KB - -
@sentry/browser (incl. FeedbackAsync) 32.4 KB +0.06% +17 B 🔺
@sentry/react 25.66 KB - -
@sentry/react (incl. Tracing) 38.49 KB - -
@sentry/vue 27.06 KB - -
@sentry/vue (incl. Tracing) 37.45 KB - -
@sentry/svelte 23.11 KB - -
CDN Bundle 24.38 KB - -
CDN Bundle (incl. Tracing) 36.02 KB - -
CDN Bundle (incl. Tracing, Replay) 70.66 KB - -
CDN Bundle (incl. Tracing, Replay, Feedback) 75.82 KB +0.02% +12 B 🔺
CDN Bundle - uncompressed 71.2 KB - -
CDN Bundle (incl. Tracing) - uncompressed 106.89 KB - -
CDN Bundle (incl. Tracing, Replay) - uncompressed 217.74 KB - -
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 230.3 KB +0.02% +33 B 🔺
@sentry/nextjs (client) 38.6 KB - -
@sentry/sveltekit (client) 36.23 KB - -
@sentry/node 156.24 KB - -
@sentry/node - without tracing 97.38 KB -0.01% -2 B 🔽
@sentry/aws-serverless 106.8 KB - -

View base workflow run

billyvg
billyvg reviewed Jan 20, 2025
View reviewed changes
Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you tested different combinations of mouse events inside and outside of the canvas?

This generally LGTM -- I would say it needs the feature flag + an icon before merging.

packages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated Show resolved Hide resolved
packages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated Show resolved Hide resolved
packages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated Show resolved Hide resolved
packages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated Show resolved Hide resolved
packages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated Show resolved Hide resolved
packages/feedback/src/screenshot/components/ScreenshotEditor.tsx Outdated Show resolved Hide resolved
@c298lee c298lee marked this pull request as ready for review January 21, 2025 14:52
@c298lee c298lee requested a review from a team as a code owner January 21, 2025 14:52
@c298lee c298lee requested a review from billyvg January 21, 2025 14:52
@c298lee
Copy link
Member Author

c298lee commented Jan 21, 2025 •
edited
Loading

Have you tested different combinations of mouse events inside and outside of the canvas?

Yes! When the pen tool is on, it only starts drawing when you press down in the canvas, you can't draw if you press down outside of the canvas and drag your mouse into the canvas. The drawing state persists as long as your mouse is still down, even if you go outside of the canvas, but the lines are only visible on the canvas.

c298lee and others added 2 commits January 21, 2025 12:41
@c298lee c298lee requested review from ryan953 and billyvg January 21, 2025 17:48
@c298lee
feat(user feedback): Create pen tool button for uf annotations (#15102)
26d7601 
Adds a proper pen tool button. The icon for the button is from the
hackweek project
Unselected:
<img width="1192" alt="image"
src="/~https://github.com/user-attachments/assets/4d8ba719-ff93-4108-98a4-560296ef5890"
/>

Selected:
<img width="1192" alt="image"
src="/~https://github.com/user-attachments/assets/7bd24ef2-6877-47a3-bcf1-e871caa4f91b"
/>


Relates to #15064
@c298lee c298lee merged commit 6323549 into develop Jan 21, 2025
146 checks passed
@c298lee c298lee deleted the cl/annotate-draw-tool branch January 21, 2025 18:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ryan953 ryan953 ryan953 approved these changes

@billyvg billyvg billyvg approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Create a free-form pen drawing tool so users can annotate their screenshots
3 participants
@c298lee @billyvg @ryan953